import {
  Steps,
  Button,
  Form,
  Input,
  Select,
  message,
  notification,
} from "antd";
import React, { useEffect, useState, useRef } from "react";
import { useNavigate } from "react-router";
import style from "./News.module.css"; //css模块化
import axios from "axios";
import NewsEditor from "../../components/news-manage/NewsEditor";
import { PageHeader } from "@ant-design/pro-layout"; //使用这种方式引入 在antd5.0中已经被废弃
// const { Step } = Steps; //进度条
const { Option } = Select;
export default function NewsAdd() {
  const [current, setCurrent] = useState(0); //当前的状态第几步了  初始值为0
  const [categoryList, setCategoryList] = useState([]); //存储新闻分类下拉菜单
  const [formInfo, setFormInfo] = useState({}); //存储第一步表单里的数据
  const [content, setContent] = useState(""); ///存储第二步新闻详情
  const NewsRef = useRef(null); //先创建ref对象
  const navigator = useNavigate();
  useEffect(() => {
    axios.get("/categories").then((res) => {
      setCategoryList(res.data);
    });
  }, []);
  // 下一步
  const handleNext = () => {
    // setCurrent(current+1)
    //做校验  如果在第一步的时候校验成功就往下一步，否则报错
    //如果不是第一步，直接下一步即可
    if (current === 0) {
      // 点击下一步时对表单进行校验
      NewsRef.current
        .validateFields()
        .then((res) => {
          setFormInfo(res);
          // console.log(res);
          // 如果校验成功在进行下一步
          setCurrent(current + 1);
        })
        .catch((error) => {
          console.log(error);
        });
    } else {
      // 得到一步和二步的数据
      console.log(formInfo, content);
      // 如果这个富文本编辑器的内容为空的时候 或者为一个空的<p></p>标记时，因为后边是有一个空格 所以要清除空格.trim() 就提示新闻不能为空阻止下一步
      if (content === "" || content.trim() === "<p></p>") {
        message.error("新闻内容不能为空");
      } else {
        setCurrent(current + 1);
      }
    }
  };
  // 上一步
  const handlePadd = () => {
    setCurrent(current - 1);
  };
  const onFinish = () => {};
  const onFinishFailed = () => {};

  // 进度条 5.0的写法
  const items = [
    { title: "基本信息", description: "新闻标题，新闻分类" },
    { title: "新闻内容", description: "新闻主体内容" },
    { title: "新闻提交", description: "保存草稿或者提交审核" },
  ];
  // 发送草稿箱和提交的逻辑
  // 保存到草稿箱
  const User = JSON.parse(localStorage.getItem("token")); //得到用户的信息
  // 接收这个auditState
  const handleSave = (auditState) => {
    // 发送请求
    axios
      .post("/news", {
        ...formInfo,
        content: content, //内容
        // 如果为真就显示正常的，如果为空字符串就显示全球
        region: User.region ? User.region : "全球",
        author: User.username, //名字
        roleId: User.roleId, //id
        //auditState值为0，存到草稿相，值为1，进行提交审核，值为2，审核成功，值为3，审核失败
        auditState: auditState,
        publishState: 0, //默认未发布
        createTime: Date.now(), //时间挫
        star: 0,
        view: 0,
        publishTime: 0, //--->发布时间
      })
      .then((res) => {
        console.log(res.data);
        // console.log(33);
        // 如果值为0跳到草稿箱，值为1跳到审核列表
        navigator(
          auditState === 0 ? "/news-manage/draft" : "/audit-manage/list"
        );
        // 提示框
        notification.info({
          message: `通知`,
          description: `您可以到${
            auditState === 0 ? "草稿箱" : "审核列表"
          }中查看您的新闻`,
          placement: "bottomRight", //出现的位置右下角
        });
      });
  };

  return (
    <div>
      {/* 标题组件 */}
      <PageHeader
        className="site-page-header"
        title="撰写新闻"
        subTitle="This is a subtitle"
      ></PageHeader>

      {/* 进度条 */}
      {/* 定义个状态每次加1就会走到下一步,新版直接写一个items的数组形式就可以了 */}
      <Steps current={current} items={items}>
        {/*控制步骤 旧版的*/}
        {/* <Step title="基本信息" description="新闻标题，新闻分类" />
        <Step title="新闻内容" description="新闻主体内容" />
        <Step title="新闻提交" description="保存草稿或者提交审核" /> */}
      </Steps>

      {/* 使用css模块化，以防污染，用css做隐藏显示，以防跳转回来的时候数据消失 */}
      {/* 第一步 */}
      <div className={current === 0 ? "" : style.active}>
        <Form
          style={{ margin: "50px auto" }}
          ref={NewsRef}
          name="标题"
          // 1:2关系 栅格系统
          labelCol={{
            span: 4, //文字比例
          }}
          wrapperCol={{
            span: 20, //input比例
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="新闻标题"
            name="label"
            rules={[
              {
                required: true,
                message: "请输入新闻标题!",
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="新闻分类"
            name="categoryId"
            rules={[
              {
                required: true,
                message: "请选择新闻分类!",
              },
            ]}
          >
            <Select>
              {/* 动态的创建 */}
              {categoryList.map((item) => {
                // console.log(item)
                return (
                  <Option value={item.label} key={item.id}>
                    {item.label}
                  </Option>
                );
              })}
            </Select>
          </Form.Item>
          <Form.Item
            wrapperCol={{
              offset: 8,
              span: 16,
            }}
          ></Form.Item>
        </Form>
      </div>
      {/* 第二步 */}
      <div className={current === 1 ? "" : style.active}>
        {/* 获取富文本编辑输入的内容，通过回调函数，子向父传值 */}
        <NewsEditor
          // 子组件的回调函数
          getContent={(value) => {
            // console.log(value);
            setContent(value);
          }}
        />
      </div>
      {/* 第三步 */}
      {/* <div className={current === 2 ? "" : style.active}>报存到草稿箱</div> */}
      <div>
        {/* 等于2的就显示提交和审核 */}
        {current === 2 && (
          <span>
            <Button type="primary" onClick={() => handleSave(0)}>
              保存草稿箱
            </Button>
            <Button danger onClick={() => handleSave(1)}>
              提交审核
            </Button>
          </span>
        )}
        {/* 小于2显示下一步 */}
        {current < 2 && (
          <Button type="primary" onClick={() => handleNext()}>
            下一步
          </Button>
        )}
        {/* 大于0显示上一步 */}
        {current > 0 && (
          <Button type="primary" onClick={() => handlePadd()}>
            上一步
          </Button>
        )}
      </div>
    </div>
  );
}
